<template>
  <view class="container">
    <!-- 账户余额 -->
    <view class="balance-section">
      <text class="label">可提现余额</text>
      <text class="amount">¥{{balance}}</text>
    </view>

    <!-- 提现表单 -->
    <view class="form-section">
      <view class="form-item">
        <text class="label">提现金额</text>
        <view class="input-wrapper">
          <text class="currency">¥</text>
          <input 
            type="digit" 
            v-model="amount" 
            placeholder="请输入提现金额"
            @input="handleAmountInput"
          />
        </view>
        <text class="hint">最低提现金额100元</text>
      </view>

      <view class="form-item">
        <text class="label">提现方式</text>
        <view class="payment-methods">
          <view 
            class="method-item" 
            :class="{active: paymentMethod === 'alipay'}"
            @tap="selectPaymentMethod('alipay')"
          >
            <image src="/static/images/alipay.png" mode="aspectFit"></image>
            <text>支付宝</text>
          </view>
          <view 
            class="method-item" 
            :class="{active: paymentMethod === 'wechat'}"
            @tap="selectPaymentMethod('wechat')"
          >
            <image src="/static/images/wechat.png" mode="aspectFit"></image>
            <text>微信</text>
          </view>
          <view 
            class="method-item" 
            :class="{active: paymentMethod === 'bank'}"
            @tap="selectPaymentMethod('bank')"
          >
            <image src="/static/images/bank.png" mode="aspectFit"></image>
            <text>银行卡</text>
          </view>
        </view>
      </view>

      <!-- 支付宝账号 -->
      <view class="form-item" v-if="paymentMethod === 'alipay'">
        <text class="label">支付宝账号</text>
        <input type="text" v-model="alipayAccount" placeholder="请输入支付宝账号" />
      </view>

      <!-- 微信账号 -->
      <view class="form-item" v-if="paymentMethod === 'wechat'">
        <text class="label">微信账号</text>
        <input type="text" v-model="wechatAccount" placeholder="请输入微信账号" />
      </view>

      <!-- 银行卡信息 -->
      <template v-if="paymentMethod === 'bank'">
        <view class="form-item">
          <text class="label">开户行</text>
          <input type="text" v-model="bankName" placeholder="请输入开户行" />
        </view>
        <view class="form-item">
          <text class="label">银行卡号</text>
          <input type="number" v-model="bankAccount" placeholder="请输入银行卡号" />
        </view>
      </template>
    </view>

    <!-- 提现记录 -->
    <view class="record-section">
      <view class="section-header">
        <text class="title">提现记录</text>
        <text class="more" @tap="viewMoreRecords">查看更多</text>
      </view>
      <view class="record-list">
        <view class="record-item" v-for="(item, index) in records" :key="index">
          <view class="record-info">
            <text class="amount">¥{{item.amount}}</text>
            <text class="status" :class="item.status">{{item.statusText}}</text>
          </view>
          <view class="record-detail">
            <text class="time">{{item.time}}</text>
            <text class="method">{{item.method}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 提现按钮 -->
    <button class="withdraw-btn" @tap="handleWithdraw">申请提现</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balance: 5000.00,
      amount: '',
      paymentMethod: 'alipay',
      alipayAccount: '',
      wechatAccount: '',
      bankName: '',
      bankAccount: '',
      records: [
        {
          amount: 1000.00,
          status: 'success',
          statusText: '提现成功',
          time: '2024-03-15 14:30',
          method: '支付宝'
        },
        {
          amount: 2000.00,
          status: 'pending',
          statusText: '处理中',
          time: '2024-03-14 10:20',
          method: '微信'
        },
        {
          amount: 1500.00,
          status: 'failed',
          statusText: '提现失败',
          time: '2024-03-13 16:45',
          method: '银行卡'
        }
      ]
    }
  },
  methods: {
    handleAmountInput(e) {
      const value = e.detail.value
      if (value && parseFloat(value) > this.balance) {
        this.amount = this.balance.toString()
      }
    },
    selectPaymentMethod(method) {
      this.paymentMethod = method
    },
    viewMoreRecords() {
      uni.navigateTo({
        url: '/pages/mine/withdraw-record'
      })
    },
    handleWithdraw() {
      // 表单验证
      if (!this.amount) {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none'
        })
        return
      }

      const amount = parseFloat(this.amount)
      if (amount < 100) {
        uni.showToast({
          title: '最低提现金额为100元',
          icon: 'none'
        })
        return
      }

      if (amount > this.balance) {
        uni.showToast({
          title: '提现金额不能大于可提现余额',
          icon: 'none'
        })
        return
      }

      // 验证支付方式相关信息
      if (this.paymentMethod === 'alipay' && !this.alipayAccount) {
        uni.showToast({
          title: '请输入支付宝账号',
          icon: 'none'
        })
        return
      }

      if (this.paymentMethod === 'wechat' && !this.wechatAccount) {
        uni.showToast({
          title: '请输入微信账号',
          icon: 'none'
        })
        return
      }

      if (this.paymentMethod === 'bank') {
        if (!this.bankName) {
          uni.showToast({
            title: '请输入开户行',
            icon: 'none'
          })
          return
        }
        if (!this.bankAccount) {
          uni.showToast({
            title: '请输入银行卡号',
            icon: 'none'
          })
          return
        }
      }

      uni.showLoading({
        title: '提交中...'
      })

      // TODO: 提交提现申请
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '申请提交成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 2000)
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.balance-section {
  background-color: #1890ff;
  padding: 40rpx 30rpx;
  color: #fff;
  
  .label {
    font-size: 28rpx;
    opacity: 0.8;
  }
  
  .amount {
    font-size: 60rpx;
    font-weight: bold;
    margin-top: 20rpx;
    display: block;
  }
}

.form-section {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  
  .form-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .input-wrapper {
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      
      .currency {
        font-size: 32rpx;
        color: #333;
        margin-right: 10rpx;
      }
      
      input {
        flex: 1;
        height: 88rpx;
        font-size: 32rpx;
      }
    }
    
    .hint {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
    
    input {
      width: 100%;
      height: 88rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
    }
  }
}

.payment-methods {
  display: flex;
  justify-content: space-between;
  
  .method-item {
    width: 200rpx;
    height: 160rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    &.active {
      background-color: #e6f7ff;
      border: 2rpx solid #1890ff;
    }
    
    image {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 10rpx;
    }
    
    text {
      font-size: 24rpx;
      color: #333;
    }
  }
}

.record-section {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .more {
      font-size: 24rpx;
      color: #1890ff;
    }
  }
  
  .record-list {
    .record-item {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      .record-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .amount {
          font-size: 32rpx;
          font-weight: bold;
        }
        
        .status {
          font-size: 24rpx;
          
          &.success {
            color: #52c41a;
          }
          
          &.pending {
            color: #faad14;
          }
          
          &.failed {
            color: #f5222d;
          }
        }
      }
      
      .record-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .time, .method {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}

.withdraw-btn {
  margin: 40rpx 30rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #1890ff;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
}
</style> 